---
sidebar_position: 1
---
# Static vs dynamic

## Static by default
By default `<DataSheetGrid />` is static, meaning that it saves the props it receives
on the first render and never updates them. This is extremely useful to avoid
un-necessary re-renders due to inline props change:
```tsx
import { DataSheetGrid } from 'react-datasheet-grid'

const MyComponent = () => {
  const [ data, setData ] = useState([])

  return (
    <DataSheetGrid
      value={data}
      onChange={setData}
      columns={[ // <- ⚠️ A new array is passed on every render
        {/*...*/},
        {/*...*/},
        {/*...*/},
      ]}
      createRow={() => ({ id: genId() })} // <- ⚠️ A new function is passed on every render
    />
  )
}
```
Inline props are the easiest way to write your component, and this example is perfectly fine because even tho
`<DataSheetGrid />` receives different props every time, this does not trigger a re-render of the grid because it "saved"
the value it received on original render.

## Which props are static?
All props that are not primitive (ie. objects, array, or functions) are static.
Therefore, `columns`, `createRow`, `duplicateRow` and other non primitive typed props are static and cannot be changed
after first render.

:::info
The only exception to this rule is the `onChange` prop that is always dynamic.
:::

All other primitive props (number, string, or boolean) are dynamic. Therefore, `data`, `height`, `lockRows` and other
primitive typed props can be changed after first render.

## When to opt out of the static behavior?
A good rule of thumb is to keep using the static version of `<DataSheetGrid />` until it does not work as intended.
This happens when:
- You have dynamic columns. Meaning that columns can be added / removed, or their props can change after the first render
- Some functions like `duplicateRow` or `createRow` must change after the first render

## Dynamic version
To opt out of the static version, simply use `<DynamicDataSheetGrid />` instead:
```tsx
import { DynamicDataSheetGrid } from 'react-datasheet-grid'

const MyComponent = () => {
  const [ data, setData ] = useState([])
  const columns = useMemo(() => [
    {/*...*/},
    {/*...*/},
    {/*...*/},
  ], [])
  const createRow = useCallback(() => ({ id: genId() }), [])

  return (
    <DynamicDataSheetGrid
      value={data}
      onChange={setData}
      columns={columns}
      createRow={createRow}
    />
  )
}
```
When you decide to use `<DynamicDataSheetGrid />` you can no longer inline the props and have to use
`useMemo` and `useCallback` for all props that are either a function or an object.
This allows you to have dynamic props while still having optimal performance.
